<template>
	<view>
		<view @click="change()">
		    <swiper @change="imgchange" :current="currentNum">
		      <swiper-item v-for="(item,index) in list6">
				<view class="mohu">
					<image class="bg" :src="item.url"></image>
				</view>
				<image class="main" :style="{ height: item.height2 + 'px' }" :src="item.url"></image>
		      </swiper-item>
		    
		    </swiper>
		</view>
		<view :class="show?'caidanboxopen':'caidanboxclose'" class="caidanbox flex w100 flex_vc flex_wrap">
			<view class="indicator w100 flex flex_vc mb30">
				<view class="indicator-text">{{ currentNum + 1 }}/{{ list6.length }}</view>
			</view>
			<view class="caidan">
				<view class="b2"></view>
				<view class="b1 flex flex_hc">
					<view @click="back()" class="v flex flex_hc flex_wrap flex_jc">
						<image src="../../static/images/back.png"></image>
						<view class="t">返回</view>
					</view>
					<view @click="shwoJiliAd()" class="v flex flex_hc flex_wrap flex_jc">
						<image src="../../static/images/down.png"></image>
						<view class="t">下载</view>
					</view>
					<button open-type="share" class="v flex flex_hc flex_wrap flex_jc">
						<image src="../../static/images/share.png"></image>
						<view class="t">分享</view>
					</button>
				</view>
			</view>
		</view>
		
		<view>
			<u-modal :show="setting_show"
				content="检测到您没打开下载图片功能权限，是否去设置打开？" 
				@confirm = "openSetting()"  
				@cancel	 = "closeSetting()"
				showCancelButton="true"
			></u-modal>
		</view>
		
	</view>
    
</template>

<script>
	import {getImageHeight} from "@/utils/common"
    export default {
        data() {
            return {
				list6:[],
				currentNum:0,
				show: true,
				bili:0,
				windowWidth:0,
				windowHeight:0,
				setting_show:false,
				xcx_ad:getApp().globalData.xcx_ad,
				show_ad:getApp().globalData.show_ad,
            }
        },
		
		onLoad: function (option) {
			var that = this
			that.currentNum = +option.index
			that.list6 = JSON.parse(option.list)
			uni.getSystemInfo({
				success(res) {
					console.log(res)
					that.windowHeight = res.windowHeight
					that.windowWidth = res.windowWidth
					that.bili = res.windowWidth/750;
					var height2 = getImageHeight(that.bili,that.windowHeight,that.list6[that.currentNum],750)
					that.list6[that.currentNum].height2 = height2
				}
			})
		},
		onShow:function(){
			
			
		},
		
		onShareAppMessage(e) {
			var index = this.currentNum
			return {
				title: '您的好友给您分享了一张壁纸',
				path: '/pages/imgdetail/index?index='+index+'&list='+JSON.stringify(this.list6),
				imageUrl:this.list6[index].url,
			}
		},
		
		
		onShareTimeline(e) {
			var index = this.currentNum
			return {
				title: '您的好友给您分享了一张壁纸',
				path: '/pages/imgdetail/index?index='+index+'&list='+JSON.stringify(this.list6),
				imageUrl:this.list6[index].url,
			}
		},
		
		 methods: {
			
			shwoJiliAd(){
				
				var that = this
				var url = that.list6[that.currentNum].url
				if(that.show_ad){
					//判断今天有没有看过 广告
					var skey = uni.getStorageSync('skey')
					if(uni.getStorageSync(skey+'_videotime')){
						var now = parseInt(new Date().getTime()/1000)
						if(uni.getStorageSync(skey+'_videotime')>(now-86400)){
							that.openDown(url)
						}else{
							//看广告
							that.jiliAd(url)
						}
					}else{
						//看广告
						that.jiliAd(url)
					}
					
				}else{
					that.openDown(url)
				}
			}, 
			
			
			openDown(url) {
				var that = this
				uni.getSetting({
					success: res => {
						console.log('用户权限列表:', res.authSetting)
						if (res.authSetting['scope.writePhotosAlbum']) {
							console.log('已授权writePhotosAlbum')
							that.downPic(url)
							
						}else{
							console.log('用户未授权writePhotosAlbum')
							//2.用户第一次进来发起授权
							uni.authorize({
								scope: 'scope.writePhotosAlbum', 
								success: (res1) => {
									console.log("允许授权", res1);
									// 3.如果用户点击了允许，下载图片
									that.downPic(url)
								},
								fail: (err1) => {
									console.log("拒绝授权", err1);
									// 3.如果用户点击了拒绝或者用户之前点击过拒绝授权，打开用户设置模态框
									that.setting_show = true;
								},
							})
						}
					}
				})
			},
			
			
			downPic(url){
				var that = this
				var add = 0
				const downloadTask = uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function () {
									that.msg('保存成功')
									if(that.show_ad){
										// 在页面中定义插屏广告
										let interstitialAd = null
										
										// 在页面onLoad回调事件中创建插屏广告实例
										if (wx.createInterstitialAd) {
										  interstitialAd = wx.createInterstitialAd({
										    adUnitId: that.xcx_ad.interstitialId
											
										  })
										  interstitialAd.onLoad(() => {})
										  interstitialAd.onError((err) => {})
										  interstitialAd.onClose(() => {})
										}
										
										// 在适合的场景显示插屏广告
										if (interstitialAd) {
										  interstitialAd.show().catch((err) => {
										    console.error(err)
										  })
										}
									}
									
								},
								fail: function (err) {
									console.log(err)
									that.msg('保存失败')
								}
							});
						}
					}
				})
				
				//进度条
				downloadTask.onProgressUpdate((res)=>{ 
				  if (res.progress === 100) {
					  add = 100
				
					return 
					} else {
					  uni.showLoading({
							mask:true,
							title: `正在下载...${res.progress}%`,
					  })
					  add = res.progress
					 
					}
				})
			}, 
			
			
			
			jiliAd(url){
				var that =this
				// 在页面中定义激励视频广告
				let videoAd = null
				// 在页面onLoad回调事件中创建激励视频广告实例
				if (wx.createRewardedVideoAd) {
				  videoAd = wx.createRewardedVideoAd({
				    adUnitId: that.xcx_ad.jili
				  })
				  videoAd.onLoad(() => {})
				  videoAd.onError((err) => {})
				  videoAd.onClose((res) => {
					  if(res&&res.isEnded){
						  //每天 看一次广告
						  var now = parseInt(new Date().getTime()/1000)
						  var skey = uni.getStorageSync('skey')
						  uni.setStorageSync(skey+'_videotime',now)
						  that.openDown(url)
					  }else{
						  that.msg('观看完广告后自动下载到手机哦')
					  }
				  })
				}
				// 用户触发广告后，显示激励视频广告
				if (videoAd) {
				  videoAd.show().catch(() => {
				    // 失败重试
				    videoAd.load()
				      .then(() => videoAd.show())
				      .catch(err => {
				        console.log('激励视频 广告显示失败')
				      })
				  })
				}
			},
			
			
			openSetting(){
				const that = this;
				uni.openSetting({
					success: (res) => {
						console.log("打开设置成功", res);
						if (res.authSetting['scope.writePhotosAlbum']) {
							console.log('成功授权writePhotosAlbum')
							// 5.用户在设置中点击了允许，调用选择位置信息函数
							that.setting_show = false
							that.downPic()
						} else {
							console.log('用户未授权writePhotosAlbum')
							// 5.用户在设置中点击了不允许，展示拒绝授权信息
							that.msg('你拒绝了授权，无法操作内容')
							setTimeout(function () {
								that.setting_show = false
							}, 1500);
						}
					},
					fail: (err) => {
						console.log("打开设置失败", err)
					}
				})
			},
			
			
			closeSetting(){
				console.log('closeSetting')
				this.setting_show = false
			},
			 
			 
			back(){
				const pages = getCurrentPages();
				if (pages.length === 2) {
					uni.navigateBack({
						delta: 1
					});
				} else if (pages.length === 1) {
					uni.switchTab({
						url: '/pages/index/index',
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			imgchange(e){
				var that = this
				console.log(e)
				that.currentNum = e.detail.current
				var height2 = getImageHeight(that.bili,that.windowHeight,that.list6[that.currentNum],750)
				that.list6[that.currentNum].height2 = height2
			}, 
			 
			change() {
				this.show = !this.show
			},
			
			msg(msg){
				uni.showToast({
					title: msg,
					icon:'none'
				});
			},
		}
    }
</script>
<style>
	swiper-item{display: flex;align-items: center;}
	swiper{height: 100vh!important}
</style>
<style lang="scss">
	.main{width: 100vw;z-index: 3;position: relative;}
	.mohu{width: 100vw;height: 100vh;-webkit-filter: blur(5px);position: fixed;top: 0;}
	.bg{width: 100vw!important;height: 100vh!important;position: fixed;top: 0;}
	.caidan .v .t{font-size: 25rpx;color: #FFFFFF;}
	.caidan .v image{width: 60rpx;height: 60rpx;}
	.caidan .v{width: 90rpx;height: 100rpx;background: bottom;}
	.caidan .b2{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.35)}
	.caidan .b1{width: 100%;height: 100%;position: absolute;top: 0;left: 0;justify-content: space-around;}
	.caidan{width: 650rpx;height: 100rpx;position: relative;border-radius: 20rpx;overflow: hidden;}
	.indicator-text{padding: 7rpx 15rpx;background-color: #000000;color: #FFFFFF;font-size: 25rpx;border-radius: 10rpx;}
	@keyframes caidanopen {
	  0% {
	      bottom: -100rpx;
	  }
	  100% {
	      bottom: 100rpx
	  }
	}
	
	@keyframes caidanclose {
	  0% {
	      bottom: 100rpx;
	  }
	  100% {
	      bottom: -100rpx
	  }
	}
	.caidanbox{position: fixed;bottom: -100rpx;}
	.caidanboxclose{bottom: -100rpx;animation: caidanclose 1s;}
	.caidanboxopen{bottom: 100rpx;animation: caidanopen 1s;}
    .indicator {
        @include flex(row);
        justify-content: center;

        &__dot {
             height: 6px;
             width: 6px;
             border-radius: 100px;
             background-color: rgba(255, 255, 255, 0.35);
             margin: 0 5px;
             transition: background-color 0.3s;
    
            &--active {
                 background-color: #ffffff;
             }
        }
    }

    .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        @include flex;
        justify-content: center;

        &__text {
             color: #FFFFFF;
             font-size: 12px;
         }
    }
	
	button::after{
	 	border: none;
	}
	button{
		position: relative;
		display: block;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		// font-size: 18px;
		text-align: center;
		text-decoration: none;
		// line-height: 1;
		line-height: 1.35;
		// border-radius: 5px;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000000;
		background-color: #fff;
		width: 100%;
		height: 100%;
		}
</style>